<template>
	<view class="body">
		<u-navbar :is-back="false" title="优机小羊">
			<view class="slot-wrap">
				<u-image v-if="tokenShow" :src="$IMG_URL('/static/home/scan.png')" :show-loading="false" mode="aspectFill"
					width="40rpx" height="40rpx" :lazy-load="true" @tap.stop="scan"></u-image>
				<u-image v-else :src="$IMG_URL('/static/newVersion/login3.png')" :show-loading="false" mode="aspectFill"
					width="50rpx" height="40rpx"></u-image>
			</view>
		</u-navbar>
		<add-tip :tip="tip" :duration="duration" />
		<!-- 轮播图 -->
		<view class="swiper ">
			<u-swiper :list="swiperList" mode="rect" height="252" @click="routeSwiper" interval="5000"></u-swiper>
			<view class="swiper_content">
				<view v-for="(item,index) in swiperContent" :key="index" class="item">
					<view class="item">
						<image :src="$IMG_URL(item.img)" mode="aspectFill"
							:style="{width:item.with + 'rpx', height:item.height + 'rpx'}" class="icon"></image>
						<view class="size">
							{{item.size}}
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="store_box" v-if="is_shop">
			<view class="store_header">
				<view class="left">
					我的门店
				</view>
				<view class="right" @click.stop="routeSelect">
					<image :src="$IMG_URL('/static/newVersion/cut.png')" mode="aspectFill" class="cut"></image>
					<view class="size">
						切换门店
					</view>
				</view>
			</view>
			<view class="store_particulars">
				<view class="top_img ">
					<u-swiper interval="5000" :list="shopInfo.image_list" mode="none" height="240"
						@click.stop="$PREVIEW_IMAGEARRAY(shopInfo.image_list)"></u-swiper>
				</view>
				<view class="store_introduce" @click.stop="routeShopName">
					<view class="firm_name">
						<image :src="shopInfo.category_image" mode="aspectFill" class="darg" v-if="shopInfo.category_image"></image>
						<view class="title ">
							{{shopInfo.name}}
						</view>
					</view>
					<view class="business_hours">
						<view class="official "
							:style="{color:(shopInfo.manage == 1 ?'#73F0EA':shopInfo.manage == 2 ?'#B6B6B6':'#EAAF3B')}">
							{{shopInfo.manage_str}}
						</view>
						<view class="concrete_time ">
							{{shopInfo.manage_time}}
						</view>
						<view class="size1 ">
							{{shopInfo.label}}
						</view>
					</view>
					<view class="sku">
						<view v-for="(item,index) in shopInfo.tag_list" :key="index" class="item">
							{{item}}
						</view>
					</view>

				</view>
				<view class="bottom_box ">
					<view class="address " @click.stop="routeMapnavgation">
						<view class="top ">
							{{shopInfo.address}}
						</view>
						<view class="bottom ">
							<image :src="$IMG_URL('/static/newVersion/navigation.png')" mode="aspectFill" class="logo">
							</image>
							<view class="size">
								{{shopInfo.distance}}
							</view>
						</view>
					</view>
					<view class="button " @click.stop="routeGuide">
						到店指引
					</view>
				</view>
			</view>
		</view>
		<!-- 618 -->
		<view class="" style="margin-top:24rpx;">

		</view>
		<activitBox :query="preheat_info" v-if="JSON.stringify(preheat_info) != '{}'"></activitBox>
		<!-- VIP会员 -->
		<view class="content_box " v-if="is_shop">
			<view class="content_hearder">
				<view class="left">
					VIP会员
				</view>
				<view class="right" @click.stop="routeSingle">
					<view class="size">
						{{vip_str}}
					</view>
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="indicate" v-if="!is_single">
					</image>
				</view>
			</view>
			<view class="center_box center_darg ">
				<MemberList v-if="member_List.length" :memberList="member_List"></MemberList>
				<noCentent :content="'会员卡正在赶来的路上~'" v-else></noCentent>
			</view>
		</view>

		<!-- 推荐教练 -->
		<view class="content_box " v-if="is_shop">
			<view class="content_hearder">
				<view class="left">
					推荐教练
				</view>
				<view class="right" @click="routeCoachList">
					<view class="size">
						全部教练
					</view>
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="indicate"></image>
				</view>
			</view>
			<view class="center_box center_darg1 ">
				<coach v-if="coach_List.length" :coachList="coach_List"></coach>
				<noCentent :content="'教练正在赶来的路上~'" v-else></noCentent>
			</view>
		</view>
		<!-- 推荐课程 -->
		<view class="content_box" v-if="is_shop">
			<view class="content_hearder">
				<view class="left">
					推荐课程
				</view>
				<view class="right">
				</view>
			</view>
			<view class="center_box center_darg1 ">
				<course v-if="course_List.length" :courseList="course_List"></course>
				<noCentent :content="'课程正在赶来的路上~'" v-else></noCentent>
			</view>
		</view>
		<location v-if="GetlocationShow" @childEvent="handleDataFromChild"></location>
		<ImagePopup  :visible="popupVisible" @close="closePopup">
			<view class="slot-box">
				<image :src="popout_info.image" mode="widthFix" style="width: 618rpx;" @click="ShareClick"></image>
			</view>
		</ImagePopup>
		<!-- </ImagePopup> -->
		<BrandLogo></BrandLogo>
	</view>
</template>

<script>
	import addTip from '@/components/wxcomponents/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
	import noCentent from './components/no_content.vue'
	import BrandLogo from './components/Brand_logo.vue'
	import MemberList from './components/member_list.vue'
	import coach from './components/coach_list.vue'
	import course from './components/course.vue'
	import location from './components/location.vue'
	import ImagePopup from './components/ImagePopup.vue'
	import activitBox from '@/components/activities.vue'
	import {
		checkToken,
		refreshToken
	} from '@/api/common.js'
	import {
		homeDeatil,
		analysisQrCode,
		draw
	} from '@/api/home.js'
	export default {
		components: {
			addTip,
			noCentent,
			BrandLogo,
			MemberList,
			coach,
			course,
			location,
			ImagePopup,
			activitBox
		},
		data() {
			return {
				// 添加小程序，快捷方式
				tip: '点击「添加小程序」，下次访问更便捷',
				duration: 1,
				// 打开小程序设置定位
				GetlocationShow: false,
				// 打开城市icon
				showCity: false,
				// 轮播图列表

				query: {
					shop_id: ''
				},
				shopInfo: {},
				is_single: 0,
				swiperList: [],
				// 轮播图标记
				swiperContent: [{
						img: '/static/newVersion/swiper_001.png',
						with: 21.51,
						height: 21.44,
						size: '优质课程'
					},
					{
						img: '/static/newVersion/swiper_002.png',
						with: 15.48,
						height: 24.12,
						size: '专业教练'
					},
					{
						img: '/static/newVersion/swiper_003.png',
						with: 24.1,
						height: 24.1,
						size: '科学定制'
					},
					{
						img: '/static/newVersion/swiper_004.png',
						with: 23.12,
						height: 24.6,
						size: '高效便捷'
					}
				],
				// 店铺详情
				store_deatil: {},
				vip_str: '',
				// VIP会员
				member_List: [],
				// 教练列表
				coach_List: [],
				// 课程列表
				course_List: [],
				tokenShow: false,
				popupVisible: false, // 控制弹窗显示
				popoutQuery: {},
				is_shop: 0,
				preheat_info: {},
				popout_info: {},
				is_share: 0
			}
		},
		onReady() {},
		onShow() {
			let that = this
			that.getLocation();
			that.$CHECKTOKEN().then(isValid => {
				if (isValid) {
					console.log('Token is valid', isValid);
					that.tokenShow = true
				} else {
					that.tokenShow = false
					console.log('Token is invalid or not found', isValid);
				}
			}).catch(error => {
				that.tokenShow = false
				console.error('Error checking token:', error);
			});
			uni.$on('SHOPID', function(data) {
				console.log("SHOPID：", data);
				that.query.shop_id = data.shop_id
				that.gethomeDeatil()
			})
		},
		onLoad(e) {
			console.log('e', e);
			console.log('e11', encodeURIComponent(e.scene));
			if (JSON.stringify(e) !== '{}') {
				if (e.scene) {
					this.getanalysisQrCode({
						scene: e.scene
					})
				}
			}
			this.query.shop_id = e.shop_id || '';


		},
		mounted() {


		},
		methods: {
			routeSelect() {
				uni.navigateTo({
					url: '/pageA/shop/select'
				})
			},
			routeCoachList() {
				uni.navigateTo({
					url: '/pageA/shop/coach/list?shop_id=' + this.shopInfo.shop_id
				})
			},
			ShareClick() {
				this.popupVisible = false
				if (this.popout_info.form == 'card') {
					uni.navigateTo({
						url: '/pageA/member/purchase?par=' + this.popout_info.param
					})
				} else if (this.popout_info.form == 'share') {
					this.$ROUTELINK('/pageB/user/invite/friend')
				}

			},
			drawClick() {
				// 弹框跳转分享优惠券
				draw({
					form: 'coupon',
					coupon_id: this.popoutQuery.coupon_id
				}).then(({
					data: res
				}) => {
					if (res.code == 1) {
						this.popupVisible = false
						this.$ROUTELINK('/pageB/user/coupon')
					} else {
						if (res.code == 401) {
							uni.navigateTo({
								url: '/pageB/user/login'
							})
						}
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 关闭弹窗
			closePopup() {
				this.popupVisible = false;
			},
			// 处理按钮点击
			handleBtnClick() {
				// 保存关闭状态到本地缓存
				uni.setStorageSync('popupClosed', true);
				this.closePopup(); // 关闭弹窗
			},
			routeShopName() {
				uni.navigateTo({
					url: '/pageA/shop/particulars?shop_id=' + this.shopInfo.shop_id
				})
			},
			getanalysisQrCode(ee) {
				analysisQrCode(ee).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						if (res.data.form == 'invite') {
							uni.setStorage({
								key: 'scene',
								data: res.data.scene
							})
							uni.navigateTo({
								url: '/pageA/member/purchase?par=' + res.data.par + '&is_share=' + 1
							})
						} else if (res.data.form == 'activity') {
							uni.setStorage({
								key: 'scene',
								data: res.data.scene
							})
						} else if (res.data.form == 'shop') {
							uni.navigateTo({
								url: '/pageA/shop/particulars?shop_id=' + res.data.par + '&is_share=' + 1
							})
						} else if (res.data.form == 'join') {
							uni.redirectTo({
								url: '/pageB/activity/join/newIndex'
							})
						} else {
							this.$ROUTELINK('/pageB/receive/index?query=' + JSON.stringify(res.data))
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			scan() {
				let t = this
				uni.scanCode({
					success: function(saoma) {
						console.log('saoma', saoma);
						if (saoma.errMsg === 'scanCode:ok') {
							let queryString = saoma.path
							let parts = queryString.split('scene=');
							if (parts.length > 1) {
								let sceneValue = parts[1]; // 这将包含 '8ebd3f8bdb1788d2bd5d51cab45b0c9vue'
								console.log(sceneValue, 'sceneValue');
								t.getanalysisQrCode({
									scene: sceneValue
								})
							}
						} else {
							uni.showToast({
								title: '扫码失败',
								icon: 'none'
							})
						}

					}
				});
			},
			routeSwiper(e) {
				const {
					form,
					param
				} = this.swiperList[e]
				console.log('e', form);
				if (form == 'exp') {
					this.$ROUTELINK('/pageA/course/detail?course=' + param)
				} else if (form == 'join') {
					uni.navigateTo({
						url: '/pageB/activity/join/newIndex'
					})
				} else if (form == 'league') {
					this.$ROUTELINK('/pageB/user/become_coach/accept_coach')
				} else if (form == 'share') {
					this.$ROUTELINK('/pageB/user/invite/friend')
				} else if (form == 'card') {
					uni.navigateTo({
						url: '/pageA/member/purchase?par=' + param
					})
				} else {
					this.$ROUTELINK('/pageB/activity/deatil?form=' + form + '&param=' + param)
				}

			},
			onPullDownRefresh() {
				uni.showLoading()
				this.getLocation();
				this.gethomeDeatil()
				setTimeout(() => {
					uni.stopPullDownRefresh(); // 停止下拉刷新动画
					uni.hideLoading()
					// 更新页面数据等操作
				}, 1000);
			},
			routeSingle() {
				
				if (!this.is_single) {
					console.log('单店通用卡');
					uni.navigateTo({
						url: '/pageA/shop/select?type=' + 1
					})
				} else {
					uni.showToast({
						title: this.vip_str,
						icon: 'none'
					})
				}
			},
			routeGuide() {
				uni.navigateTo({
					url: '/pageA/shop/Arrival-guide?shop_id=' + this.shopInfo.shop_id
				})
			},
			gethomeDeatil() {
				console.log(this.query)
				homeDeatil(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.popout_info = res.data.popout_info
						this.preheat_info = res.data.preheat_info
						this.swiperList = res.data.activity_list
						this.shopInfo = res.data.shop_info
						this.member_List = res.data.vip_list
						this.vip_str = res.data.vip_str
						this.coach_List = res.data.coach_list
						this.course_List = res.data.course_list
						this.is_single = res.data.is_single
						this.popupVisible = res.data.is_popout ? true : false
						this.popoutQuery = res.data.is_popout ? res.data.popout_info : {}
						this.$u.mpShare = {
							title: res?.data?.shop_info?.name || '默认店铺名',
							path: `pages/index/index?shop_id=${encodeURIComponent(String(res?.data?.shop_info?.shop_id || ''))}`,
							imageUrl: (res?.data?.shop_info?.image_list?.filter(url =>
								url?.startsWith('http') // 基础格式验证 
							)[0]) || '/static/share-default.jpg'
						}
						this.is_shop = res.data.is_shop
						if (!res.data.is_shop) {
							this.GetlocationShow = false
							this.showPermissionModal()
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getToken() {

			},
			routeMapnavgation() {
				let that = this
				uni.openLocation({
					latitude: Number(that.shopInfo.lat), //要去的纬度-地址
					longitude: Number(that.shopInfo.long), //要去的经度-地址
					address: that.shopInfo.address, //要去的具体地址
				})
			},
			// 定位子组件方法
			handleDataFromChild(message) {
				console.log('message', message);
				this.GetlocationShow = message;
			},
			// 获取经纬度
			getLocation() {
				let that = this;
				uni.getLocation({
					type: "gcj02", //gcj02 wgs84
					success(res) {
						console.log('resgetLocation', res);
						const {
							latitude,
							longitude
						} = res
						console.log("getLocation", res);
						uni.setStorageSync('lat', latitude);
						uni.setStorageSync('long', longitude);
						that.gethomeDeatil()
					},
					fail: (err) => {
						console.log('err', err);
						that.GetlocationShow = true
						this.gethomeDeatil(); // 失败时也强制执行 
						// that.showPermissionModal()
						// console.log('位置信息获取失败');
					},
				});
			},
			showPermissionModal() {
				// this.GetlocationShow = false
				uni.showModal({
					title: '定位服务未开启',
					content: '需要获取您的位置信息以提供周边服务，请前往设置开启定位权限',
					confirmText: '立即开启',
					showCancel: true,
					cancelText: '选择门店',
					confirmColor: '#73F0EA',
					cancelColor: '#666666',
					success: (res) => {
						if (res.confirm) {
							this.openSystemSettings()
						} else if (res.cancel) {
							this.GetlocationShow = true
							uni.navigateTo({
								url: '/pageA/shop/select'
							})
						}
					}
				})

			},
			openSystemSettings() {
				uni.openSetting() // 微信小程序打开设置页
			}
		}
	}
</script>

<style lang="scss">
	.slot-box {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	page {
		background: #e9e9e9;
	}

	.body {
		padding: 0 24rpx;

		.slot-wrap {
			margin-left: 32rpx;

			.scan {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.swiper {
			margin-top: 24rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;

			.swiper_content {
				padding: 12rpx 0;
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				.item {
					display: flex;
					flex-direction: row;
					align-items: center;

					.icon {
						margin-right: 7.2rpx;
					}

					.size {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.store_box {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 16rpx 24rpx;

			.store_header {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				margin-bottom: 20rpx;

				.left {
					flex: 1;
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.cut {
						width: 20rpx;
						height: 20rpx;
						margin-right: 7.5rpx;
					}

					.size {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #73F0EA;
					}
				}
			}

			.store_particulars {
				width: 100%;
				background: #f6f6f6;
				border-radius: 16rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top_img {
					margin-top: 8rpx;
					width: 100%;
					height: 240rpx;

				}

				.store_introduce {
					width: 100%;
					padding: 20rpx 0 16rpx 34rpx;
					display: flex;
					flex-direction: column;

					.firm_name {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 6rpx;

						.darg {
							width: 114rpx;
							height: 36rpx;
							margin-right: 8rpx;
						}

						.title {
							font-size: 32rpx;
							font-weight: 700;
							color: #333333;
						}
					}

					.business_hours {
						display: flex;
						flex-direction: row;
						align-items: center;

						.official {
							font-size: 24rpx;
							font-weight: 500;
							color: #73F0EA;
						}

						.concrete_time {
							margin: 0 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}

						.size1 {
							font-size: 24rpx;
							font-weight: 500;
							color: #666666;
						}
					}

					.sku {
						display: flex;
						flex-direction: row;
						align-items: center;

						.item {
							margin-top: 8rpx;
							height: 28rpx;
							background: #ededed;
							border-radius: 4rpx;
							padding: 0 6rpx;
							font-weight: 500;
							color: #666666;
							margin-right: 6rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #666666;
						}
					}


				}

				.bottom_box {
					margin-top: 16rpx;
					width: 100%;
					background: linear-gradient(180deg, #ededed, #f7f7f7);
					border-radius: 16rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 20rpx 28rpx 20rpx 34rpx;
					z-index: 99;

					.address {
						display: flex;
						flex-direction: column;
						flex: 1;
						margin-bottom: 8rpx;
						padding-right: 30rpx;

						.top {
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
						}

						.bottom {
							display: flex;
							flex-direction: row;
							align-items: center;

							.logo {
								width: 22rpx;
								height: 22rpx;
							}

							.size {
								font-size: 24rpx;
								font-weight: 500;
								color: #73F0EA;
							}
						}
					}

					.button {
						width: 128rpx;
						height: 58rpx;
						border: 2rpx solid #73F0EA;
						border-radius: 16rpx;
						font-size: 24rpx;
						font-weight: 700;
						color: #73F0EA;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		.content_box {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 16rpx 0;

			.content_hearder {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				padding: 0 24rpx;

				.left {
					flex: 1;
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.size {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: right;
						color: #999999;
					}

					.indicate {
						width: 10rpx;
						height: 16rpx;
						margin-left: 6rpx;
					}
				}
			}

			.center_box {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}

	.center_darg {
		padding: 35rpx 24rpx;
	}

	.center_darg1 {
		padding: 35rpx 0 35rpx 24rpx;
	}
</style>